<template>
	<div class="search-result-box">
		<ZxyhHeader v-if="$channel=='zxyh'" :title="''" :isClose='false' :isSearch='true' @search='searchTrue'></ZxyhHeader>
		<header ref='header'>
			<div class="search-wrap">
				<form @submit.prevent action="#">
					<input type="search" placeholder="请输入搜索关键字" v-model="searchKeyword" @keyup.13="handelSearch" ref="inputSearch">
				</form>
				<Iconfont iconClass="sousuo " />
				<div class="cancel" @click="cancel">取消</div>
			</div>
		</header>
		<div class="connect-box">
			<div class="no-video" v-if="isNoVideo"></div>
				<ul>
					<li v-for="(v,index) in conData" :key='v.id'  @click="linkLookBackPage(v)">
						<div class="contect-img">
							<img :src="v.bgimg+'?x-oss-process=image/resize,m_fixed,h_199,w_350'" />
							<div class="audience">
								<i class="iconfont icon-user"></i>
								<div class="see" v-html="filtNum(v.num)"></div>
							</div>
						</div>
						<p class="li-title">{{v.title}}</p>
					</li>
				</ul>
		</div>
	</div>
</template>
<script>
import ZxyhHeader from '@/components/zxyh/zxyhHeader'
	export default {
		components: {
        ZxyhHeader
		},		
		props: {},
		data(){
			return{
				conData:[],
				isNoVideo:false,
				page:1,
				searchKeyword:'',
			}
		},
		created() {
			this.$store.dispatch("hideNav");
			this.searchKeyword = this.$route.query.content;
			this.getVideoArray(this.page, this.$route.query.typeId, this.searchKeyword);
		},
		methods: {
			linkLookBackPage(v){
				this.$router.push(`/${this.$channel}/lookBack_particulars/${v.id}`);
			},
			handelSearch(){
				this.page = 1;
				this.conData = [];
				this.getVideoArray(this.page, this.$route.query.typeId, this.searchKeyword)
			},
			getVideoArray(page, typeId, title) { //视频列表  page 页码    pageSize 一页的个数   typeId 专辑的id  gradeId 年纪的id   cityId城市的id   tagsId标签的id
				this.$http.get("/h5live/getTspdVideos?page=" + page + "&pageSize=10" + "&typeId=" + typeId + "&gradeId=&cityId=&tagsId="+"&title="+title)
					.then(res => {
						if(res.data.code == "000000") {
							//console.log(res.data.data)
							if(res.data.data.length) {
								this.conData = [...this.conData,...res.data.data];
								this.isNoVideo = false;
							} else {
								console.log('数组为空暂无数据')
								this.isNoVideo = true;
							}
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			cancel() {
              this.$router.go(-1)
			},
				filtNum(num) {
				if(!num) {
					num = 0
				} else if(num > 10000) {
					num = `${(num/10000).toFixed(1)}万`
				}
				return num
			},
		},
	};
</script>

<style scoped="scoped">
	.search-result-box {
		width: 100vw;
		height: 100vh;
		background: white;
	}
	.connect-box{
		width: 100vw;
		height: calc(100vh - 80px);
		background: white;
		margin-top: 5px;
		overflow-y: scroll;
	}
	header {
		position: relative;
		background: white;
		top: 0;
		left: 0;
		/*background: pink;*/
	}
	
	.search-wrap {
		height: 80px;
		display: flex;
		padding-left: 20px;
		align-items: center;
		opacity: 1;
		/* margin-top: 15px;*/
	}
	
	.search-wrap.searchShow {
		opacity: 1;
	}
	
	.search-wrap i {
		position: absolute;
		left: 50px;
		font-size: 30px;
		color: #666;
		top: 26px;
	}
	
	.search-wrap input {
		width: 620px;
		height: 60px;
		background: rgba(246, 246, 246, 1);
		border-radius: 30px;
		background: #F6F6F6;
		box-sizing: border-box;
		padding-left: 80px;
		font-size: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	input::placeholder {
		padding: 0;
	}
	
	.search-wrap .cancel {
		margin-left: 30px;
		font-size: 28px;
		color: #333;
	}
	
	::-webkit-scrollbar {
		height: 0;
		width: 0;
		color: transparent;
		display: none;
	}
	
	.connect-box ul {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 10px;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.connect-box ul li {
		width: 350px;
		position: relative;
		padding-bottom: 20px;
	}
	
	.contect-img {
		position: relative;
		height: 199px;
		margin-bottom: 20px;
	}
	
	.connect-box img {
		width: 350px;
		height: 199px;
		border-radius: 8px;
	}
		.audience {
		position: absolute;
		right: 0;
		bottom: 0;
		height: 30px;
		padding: 4px 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 8px 0px 8px 0px;
	}
	
	.iconfont.icon-user {
		color: #fff;
	}
	
	.li-title {
		max-width: 330px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28px;
		font-weight: 400;
		color: #333333;
		margin-top: 18px;
		padding-left: 6px;
		margin-bottom: 10px;
	}
	
	.see {
		color: #fff;
		font-size: 16px;
		padding: 4px;
	}
		.no-video{
		width: 100%;
		height: 470px;
		background: url(../../assets/images/no-video.png) no-repeat center center;
		/* background-size: 750px 470px; */
		position: absolute;
		top: 350px;
		left: 0;
	}
	.header-conatiner ~ .connect-box{
         height: calc(100vh - 168px);
	}
	.header-conatiner-zxyhIos ~ .connect-box{
       height: calc(100vh - 228px);
	}
</style>